<template>
	<div class="main">
		<div class="resutDetailWrap">
			<div class="back">
				<go-back aa='../evaluation/reportRecord'></go-back>
				<h2 style="text-align: center;">综合测评结果详情</h2>

			</div>
			<div class="reuDelWrap">
				<scroller style="top: 1.6rem;">
					<div class="reuWrap">
						<div class="reuBoxs">
							<div class="reu1">
								<span>生涯测评结果汇总</span>
							</div>
							<div class="reu2 flex-h" @click="goesResult(1,itemDatas.interestSet)">
								<span class="sp1"><img src="~/static/iconsvgs/college_icon_roll.png" alt=""><b>职业兴趣测试</b></span>
								<span class="sp2">{{itemDatas.interest}}</span>
							</div>
							<div class="reu2 flex-h" @click="goesResult(4,itemDatas.intelligenceSet)">
								<span class="sp1"><img src="~/static/iconsvgs/college_icon_roll.png" alt=""><b>多元智能测试</b></span>
								<span class="sp2">{{itemDatas.intelligence}}</span>
							</div>
							<div class="reu2 flex-h" @click="goesResult(2,itemDatas.worthSet)">
								<span class="sp1"><img src="~/static/iconsvgs/college_icon_roll.png" alt=""><b>职业价值观测试</b></span>
								<span class="sp2">{{itemDatas.worth}}</span>
							</div>
							<div class="reu2 flex-h" @click="goesResult(3,itemDatas.character)">
								<span class="sp1"><img src="~/static/iconsvgs/college_icon_roll.png" alt=""><b>MBTI性格测试</b></span>
								<span class="sp2">{{itemDatas.character}}</span>
							</div>
							<div class="reu2 flex-h" @click="goesResult(5,itemDatas.grownSet)">
								<span class="sp1"><img src="~/static/iconsvgs/college_icon_roll.png" alt=""><b>成长环境测试</b></span>
								<span class="sp2">{{itemDatas.grown}}</span>
							</div>
						</div>
						<div class="reubotBox">
							<div v-if="delData.length>0">
								<div class="bot1 flex-h" @click="commonJs.gosto('moreResult')">
									<span class="sp1 flex1">推荐专业综合结果</span>
									<span class="sp2"><b>更多</b><img src="~/static/iconsvgs/rightsy.png" alt=""></span>
								</div>
								<div>
									<div>
										<div class="botBox2 flex-h" v-for="(item,$index) in delData" :key='$index' @click="gotoMajor('/professional/catalogList', item.major)">
											<span class="sp1"><b></b></span>
											<span class="flex1 sp2">
												<b>{{item?item.major:''}}</b>
												<i>{{item?item.category:''}}</i>
											</span>
											<span class="sp3"><b>{{item?item.score:''}}</b><img src="~/static/iconsvgs/rightsy.png" alt=""></span>
										</div>
									</div>

								</div>
							</div>
							<div class="bot1 flex-h">
								<span class="sp1 flex1">典型职行业</span>
								<span class="sp2"></span>
							</div>
							<div class="textp">
								<p>{{strText}}</p>
							</div>
							<div class="bot1 flex-h">
								<span class="sp1 flex1">专家建议</span>
								<span class="sp2"></span>
							</div>
							<div class="textp">
								<p style="margin-bottom: 0.15rem;" v-for="(its,index) in proSuggest" :key="index+20">{{its}}</p>
							</div>
						</div>
						<div style="width: 100%;height: 1.6rem;"></div>
					</div>

				</scroller>

			</div>

		</div>

	</div> 
</template>
<script>
	import ls from 'store2';
	// import {} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	import reportList from '~/components/reportList'
	import axios1 from '~/plugins/axios1'
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			goBack,
			reportList
		},
		data() {
			return {
				itemDatas: [],
				delData: [],
				strText: '',
				proSuggest: []
			}
		},
		mounted: function() {
			this.showZhResultList()
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
			ls.set('preUrl','../evaluation/resultDetails')

		},					
		destroyed() {
			// this.commonJs.xahui('../evaluation/reportRecord')
			window.removeEventListener('popstate', this.fun, false);
		},
		created() {
			this.commonJs.gologins();
		},
		watch: {

		},
		methods: {
			goesResult(para,parb){
				console.log(para,parb)
				// let arrs = JSON.parse(parb);
				let arrs;
				if(para===3){
					arrs = parb
				}else{
					arrs = JSON.parse(parb);
				}
				console.log('arrs')
				let obj = {
					status: para,
					worthScore: arrs					 
				}
				ls.set('resultPar', obj)
				ls.set('preUrl','../evaluation/resultDetails')
				this.commonJs.gosto('chiResult')
				
			},
				goesResu(item) {
				console.log('sssitrem', item)
				let sxr;
				switch (item.type) {
					case 1:
						sxr = 1
						break;
					case 2:
						sxr = 4
						break;
					case 3:
						sxr = 2
						break;
					case 4:
						sxr = 3
						break;
					case 5:
						sxr = 5
						break;
					default:
						break;
				}
				console.log('sxr',sxr)
				let arrs = JSON.parse(item.characterSet);
				console.log('chiResult', typeof(item.characterSet))
				console.log('arrs', typeof(arrs))
				let obj = {
					status: sxr,
					worthScore: arrs,
			 
				}
				ls.set('resultPar', obj)
				this.commonJs.gosto('chiResult')
			},
				fun() {
				this.$router.replace({
					path: '../evaluation/reportRecord'
				
				})
			
			},
			showZhResultList() {
				// let userid = 1745680;263997
				let ids = ls.get('zhId') * 1;
				axios1.posts('/career/getReportDetails?id=' + ids).then(res => {
					if (res.code === '0') {
						this.itemDatas = res.data.evaluationVo;
						// let art=[]
						let majordata = res.data.majorScoreVo;
						if(majordata.length>2){
							this.delData.push(majordata[0])
							this.delData.push(majordata[1])
							this.delData.push(majordata[2])
						}
						
						
						this.strText = res.data.profession;
						this.proSuggest = res.data.suggests;
						// this.delData = art;
						// console.log('art',art)
					}
				}).catch(() => {
					this.$vux.toast.text('数据错误');
				})

			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				})
			},
			gotoMajor(routerName, queryData) {
				this.$store.commit('changeSendMsg', queryData)
				this.$router.replace({
					path: routerName,
				});
			},

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.resutDetailWrap {
		width: 7.5rem;
		height: 100vh;

		.reuDelWrap {
			width: 7.5rem;
			height: auto;

			.reuWrap {
				width: 100%;
				height: auto;
				padding: 0.3rem 0.3rem 0;
				box-sizing: border-box;

				.reuBoxs {
					width: 100%;
					height: auto;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
					border-radius: 0.2rem;
					padding: 0.3rem 0.3rem 0.5rem;
					box-sizing: border-box;

					.reu1 {
						height: 0.4rem;
						line-height: 0.4rem;

						span {
							font-size: 0.26rem;
							font-weight: bold;
							color: rgba(187, 187, 187, 1);

						}

					}

					.reu2 {
						span {
							height: 0.9rem;
							line-height: 0.9rem;
						}

						.sp1 {
							// flex: 3;

							img {
								width: 0.22rem;
								height: 0.22rem;
								vertical-align: middle;

							}

							b {
								vertical-align: middle;
								font-size: 0.3rem;
								margin-left: 0.15rem;
								font-weight: bold;
								color: rgba(34, 34, 34, 1);
								line-height: 42px;
							}
						}

						.sp2 {
							flex: 1;
							// height:42px;
							font-size: 0.3rem;
							text-align: right;
							font-weight: bold;
							color: rgba(108, 191, 32, 1);
							// line-height:42px;
						}
					}


				}

				.reubotBox {
					padding: 0 0.3rem 0.3rem;
					box-sizing: border-box;
					margin-top: 0.3rem;
					width: 100%;
					height: auto;
					background: rgba(255, 255, 255, 1);
					border-radius: 0.2rem;

					.bot1 {
						padding: 0.5rem 0 0.3rem;
						border-bottom: 0.01rem solid rgba(238, 238, 238, 1);

						.sp1 {
							font-size: 0.34rem;

							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

						.sp2 {
							b {
								font-size: 0.26rem;
								color: rgba(34, 34, 34, 1);
								vertical-align: middle;
							}

							img {
								width: 0.3rem;
								height: auto;
								vertical-align: middle;
								margin-left: 0.05rem;
							}

						}
					}

					.botBox2 {
						margin-top: 0.3rem;
						width: 100%;
						height: 1.5rem;
						border-radius: 0.1rem;
						padding: 0 0.2rem;

						.sp1 {
							width: 1rem;
							height: 1.5rem;
							overflow: hidden;

							b {
								width: 0.6rem;
								height: 0.6rem;
								display: block;
								margin-top: 0.45rem;


							}

							// 					
						}

						.sp2 {
							height: 1.5rem;
							padding: 0.3rem 0rem;
							box-sizing: border-box;

							b,
							i {
								display: block;
								height: 0.45rem;
								line-height: 0.45rem;
							}

							b {
								font-size: 0.3rem;
								font-weight: bold;
								color: rgba(34, 34, 34, 1);

							}

							i {
								// width: 78px;
								font-size: 0.26rem;
								font-weight: bold;
								color: rgba(187, 187, 187, 1);

							}
						}

						.sp3 {
							b {
								font-size: 0.4rem;
								vertical-align: middle;
								font-weight: 600;
								color: rgba(108, 191, 32, 1);
							}

							img {
								width: 0.3rem;
								height: auto;
								vertical-align: middle;
								margin-left: 0.05rem;
							}

						}

					}

					.botBox2:nth-of-type(1) {
						background: linear-gradient(270deg, rgba(255, 239, 174, 1) 0%, rgba(255, 252, 226, 1) 100%);

						.sp1 {
							b {
								background: url('~/static/iconsvgs/hg1.png') no-repeat;
								background-size: 100% 100%;
							}
						}
					}

					.botBox2:nth-of-type(2) {
						background: linear-gradient(270deg, rgba(236, 244, 252, 1) 0%, rgba(246, 250, 254, 1) 100%);

						.sp1 {
							b {
								background: url('~/static/iconsvgs/hg2.png') no-repeat;
								background-size: 100% 100%;
							}
						}
					}

					.botBox2:nth-of-type(3) {
						background: linear-gradient(270deg, rgba(251, 237, 219, 1) 0%, rgba(253, 248, 241, 1) 100%);

						.sp1 {
							b {
								background: url('~/static/iconsvgs/hg3.png') no-repeat;
								background-size: 100% 100%;
							}
						}
					}

					.textp {
						width: 100%;
						height: auto;
						padding: 0.2rem 0;
						box-sizing: border-box;

						p {
							font-size: 0.26rem;
							color: rgba(34, 34, 34, 1);
							line-height: 0.4rem;
						}
					}
				}

			}
		}


	}

	.back {
		width: 100%;
		height: auto;

		h2 {
			padding: 0 0.3rem;
			box-sizing: border-box;
			display: block;
			height: 0.8rem;
			font-size: 0.44rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.8rem;
		}
	}
</style>
